<template>
  <div id="app">
    <div class="screen-wrap">
      <div class="top-nav">
        <div class="nav-title">贵州省煤矿智能化运维服务平台</div>
        <div class="tabs"></div>
        <div class="nav-time">
          <el-button @click="dp">集团</el-button>2025-06-26 17:36:56
        </div>
      </div>
      <div class="flex" style="margin-top: 10px">
        <div class="left-content">
          <div class="left-wrap">
            <div class="list-items">
              <div class="flex header-title">
                <h3>远程故障诊断</h3>
                <i class="el-icon-arrow-right"></i>
              </div>
              <ul class="flex value-list">
                <li>
                  <div class="title">近30天远程诊断</div>
                  <div class="value">72</div>
                </li>
                <li>
                  <div class="title">其中有效故障</div>
                  <div class="value">0</div>
                </li>
                <li>
                  <div class="title">待确认</div>
                  <div class="value">72</div>
                </li>
              </ul>
            </div>
            <div class="list-items" style="margin-top: 35px">
              <div class="flex header-title">
                <h3>故障类型分析</h3>
                <div class="flex">
                  <ul class="tab-list">
                    <li class="active">近24h</li>
                    <li class="">近30天</li>
                    <li class="">今年</li>
                  </ul>
                </div>
              </div>
              <div class="flex">
                <ul class="chart-list">
                  <li
                    v-for="(item, index) in chartData"
                    :key="index"
                    :class="item.className"
                    @mouseover="highlightChart(index)"
                    @mouseout="unhighlightChart(index)"
                  >
                    {{ item.name }}<span>{{ item.value }}%</span>
                  </li>
                </ul>
                <div
                  id="faultChart"
                  ref="chart"
                  style="width: 200px; height: 200px"
                ></div>
              </div>
            </div>
            <div class="list-items">
              <div class="flex header-title">
                <h3>故障统计</h3>
                <div class="flex">
                  <ul class="tab-list">
                    <li class="active">近24h</li>
                    <li class="">近30天</li>
                    <li class="">今年</li>
                  </ul>
                </div>
              </div>
              <StatisticsChartKD />
            </div>
            <div class="list-items" style="margin-top: 20px">
              <div class="flex header-title">
                <h3>最近故障</h3>
                <i class="el-icon-arrow-right"></i>
              </div>
              <div class="fault-list">
                <div class="data-wrap">
                  <alarm-scroll-table
                    :table-data="alarmData"
                    :scroll-speed="0.3"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="center-wrap">
          <div class="link-status">
          <div class="cloud-icon"></div>

          <svg class="connection-lines" width="100%" height="100%" style="position: absolute; top: 0; left: 0; z-index: 5;">
            <!-- 视频监控系统连接线 -->
            <path class="line line-video" d="M100,75 Q220,90 480,200"
                  stroke="url(#line-gradient)"
                  stroke-width="2"
                  fill="none"
                  stroke-dasharray="10 5">
              <animate attributeName="stroke-dashoffset" from="0" to="15" dur="1s" repeatCount="indefinite" />
            </path>

            <!-- 运输系统连接线 -->
            <path class="line line-transport" d="M190,330 Q260,250 480,200"
                  stroke="url(#line-gradient)"
                  stroke-width="2"
                  fill="none"
                  stroke-dasharray="10 5">
              <animate attributeName="stroke-dashoffset" from="0" to="15" dur="1s" repeatCount="indefinite" />
            </path>

            <!-- 通风系统连接线 -->
            <path class="line line-ventilate" d="M350,480 Q500,100 480,200"
                  stroke="url(#line-gradient)"
                  stroke-width="2"
                  fill="none"
                  stroke-dasharray="10 5">
              <animate attributeName="stroke-dashoffset" from="0" to="15" dur="1s" repeatCount="indefinite" />
            </path>

            <!-- 压风系统连接线 -->
            <path class="line line-compresse" d="M720,450 Q600,280 480,180"
                  stroke="url(#line-gradient)"
                  stroke-width="2"
                  fill="none"
                  stroke-dasharray="10 5">
              <animate attributeName="stroke-dashoffset" from="0" to="15" dur="1s" repeatCount="indefinite" />
            </path>

            <!-- 排水系统连接线 -->
            <path class="line line-water" d="M770,250 Q500,200 480,200"
                  stroke="url(#line-gradient)"
                  stroke-width="2"
                  fill="none"
                  stroke-dasharray="10 5">
              <animate attributeName="stroke-dashoffset" from="0" to="15" dur="1s" repeatCount="indefinite" />
            </path>

            <!-- 供配电系统连接线 -->
            <path class="line line-elec" d="M800,30 Q600,50 480,200"
                  stroke="url(#line-gradient)"
                  stroke-width="2"
                  fill="none"
                  stroke-dasharray="10 5">
              <animate attributeName="stroke-dashoffset" from="0" to="15" dur="1s" repeatCount="indefinite" />
            </path>

            <defs>
              <!-- 线条渐变定义 -->
              <linearGradient id="line-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="transparent" />
                <stop offset="30%" stop-color="#03f6ff" />
                <stop offset="70%" stop-color="#03f6ff" />
                <stop offset="100%" stop-color="transparent" />
              </linearGradient>

              <!-- 如果需要箭头可以取消注释 -->
              <!--
              <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
                <polygon points="0 0, 10 3.5, 0 7" fill="#03f6ff" />
              </marker>
              -->
            </defs>
          </svg>

          <ul class="status">
            <li class="video-system all-link">视频监控系统</li>
            <li class="transport-system all-link">运输系统</li>
            <li class="ventilate-wind-system all-link">通风系统</li>
            <li class="compresse-wind-system all-link">压风系统</li>
            <li class="water-system all-link">排水系统</li>
            <li class="elec-system all-link">供配电系统</li>
          </ul>

          <ul class="legend">
            <i class="el-tooltip el-icon-question item"></i>
            <li class="all-link">连接</li>
            <li class="discon-link">断开</li>
          </ul>
        </div>
          <ul class="system-list">
            <li>
              <h4>运输系统</h4>
              <div class="flex1">
                <div class="items">
                  <div class="value blue">66</div>
                  <div class="title">已上传</div>
                </div>
                <div class="items">
                  <div class="value red">0</div>
                  <div class="title">未上传</div>
                </div>
              </div>
            </li>
            <li>
              <h4>排水系统</h4>
              <div class="flex">
                <div class="items">
                  <div class="value blue">85</div>
                  <div class="title">已上传</div>
                </div>
                <div class="items">
                  <div class="value red">9</div>
                  <div class="title">未上传</div>
                </div>
              </div>
            </li>
            <li>
              <h4>通风系统</h4>
              <div class="flex">
                <div class="items">
                  <div class="value blue">102</div>
                  <div class="title">已上传</div>
                </div>
                <div class="items">
                  <div class="value red">0</div>
                  <div class="title">未上传</div>
                </div>
              </div>
            </li>
            <li>
              <h4>压风系统</h4>
              <div class="flex">
                <div class="items">
                  <div class="value blue">89</div>
                  <div class="title">已上传</div>
                </div>
                <div class="items">
                  <div class="value red">0</div>
                  <div class="title">未上传</div>
                </div>
              </div>
            </li>
            <li>
              <h4>瓦斯系统</h4>
              <div class="flex">
                <div class="items">
                  <div class="value blue">0</div>
                  <div class="title">已上传</div>
                </div>
                <div class="items">
                  <div class="value red">——</div>
                  <div class="title">未上传</div>
                </div>
              </div>
            </li>
            <li>
              <h4>供配电</h4>
              <div class="flex">
                <div class="items">
                  <div class="value blue">630</div>
                  <div class="title">已上传</div>
                </div>
                <div class="items">
                  <div class="value red">42</div>
                  <div class="title">未上传</div>
                </div>
              </div>
            </li>
          </ul>
          <div class="list-items center-bottom" style="margin-top: 20px">
            <div class="flex header-title">
              <h3>实时故障诊断</h3>
            </div>
            <fault-chart style="width: 958px; height: 255px" />
          </div>
        </div>
        <div class="right-content">
          <div class="right-wrap">
            <div class="right-top">
              <div class="list-items">
                <div class="flex header-title">
                  <h3>运维单</h3>
                  <i class="el-icon-arrow-right"></i>
                </div>
                <ul class="flex value-list">
                  <li>
                    <div class="title">待运维</div>
                    <div class="value">0</div>
                  </li>
                  <li>
                    <div class="title">待确认</div>
                    <div class="value">0</div>
                  </li>
                  <li>
                    <div class="title">待评价</div>
                    <div class="value">0</div>
                  </li>
                </ul>
              </div>
              <div class="list-items" style="margin-top: 20px">
                <div class="flex header-title">
                  <h3>巡检工作</h3>
                </div>
                <ul class="flex value-list">
                  <li>
                    <div class="title">巡检计划</div>
                    <div class="value">0</div>
                  </li>
                  <li>
                    <div class="title">待巡检</div>
                    <div class="value">0</div>
                  </li>
                  <li>
                    <div class="title">异常处理</div>
                    <div class="value">0</div>
                  </li>
                </ul>
              </div>
              <div class="list-items" style="margin-top: 20px">
                <div class="flex header-title">
                  <h3>视频监控</h3>
                  <i class="el-icon-arrow-right"></i>
                </div>
                <ul class="videoInfo">
                  <li class="blue">在线视频<span>0</span></li>
                  <li class="red">离线视频<span>0</span></li>
                </ul>
                <div class="playVideo">
                  <!-- <div class="video-area">
                  </div> -->
                </div>
              </div>
              <div class="list-items" style="margin-top: 20px">
                <div class="flex header-title">
                  <h3>报表报告</h3>
                  <i class="el-icon-arrow-right"></i>
                </div>
                <ul class="flex report-list">
                  <li>
                    <div class="value"></div>
                    <div class="title" style="margin-top: 20px">
                      煤矿运维报表
                    </div>
                  </li>
                  <li>
                    <div class="value">6月份</div>
                    <div class="title">煤矿运维报告</div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="list-items right-bottom" style="margin-top: 20px">
              <div class="flex header-title">
                <h3>运维动态</h3>
                <i class="el-icon-arrow-right"></i>
              </div>
              <div class="fault-list">
                <div class="data-wrap">
                  <scroll-table :table-data="alarmData1" :scroll-speed="0.3" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import FaultChart from "./FaultChart.vue";
import StatisticsChartKD from "./StatisticsChartKD.vue";
import AlarmScrollTable from "./AlarmScrollTable.vue";
import ScrollTable from "./ScrollTable.vue";
import CenterCmp from "./CenterCmp.vue";
export default {
  name: "dpKD",
  components: {
    AlarmScrollTable,
    CenterCmp,
    FaultChart,
    ScrollTable,
    StatisticsChartKD,
  },
  props: {},
  data() {
    return {
      chart: null,
      chartData: [
        { name: "煤矿平台故障", value: 18, className: "blue" },
        { name: "硬件故障", value: 1, className: "purple" },
        { name: "报警", value: 1, className: "orange" },
        { name: "其他", value: 1, className: "others" },
      ],
      alarmData: [
        {
          time: "2025-06-29 09:28",
          title: "主井运输_皮带:速度过高",
          status: "待确认",
        },
        {
          time: "2025-06-28 19:07",
          title: "总回风_主通风机1:二级电机定子1温度报警",
          status: "待确认",
        },
        {
          time: "2025-06-28 18:26",
          title: "总回风_主通风机1:二级电机定子2温度报警",
          status: "已处理",
        },
        {
          time: "2025-06-28 17:39",
          title: "总回风_主通风机1:一级电机定子1温度报警",
          status: "待确认",
        },
        {
          time: "2025-06-28 17:34",
          title: "总回风_主通风机1:一级电机定子2温度报警",
          status: "已处理",
        },
        {
          time: "2025-06-28 15:58",
          title: "总回风_主通风机2:一级电机定子2温度报警",
          status: "待确认",
        },
        {
          time: "2025-06-28 15:32",
          title: "总回风_主通风机1:负压过高（低）",
          status: "待确认",
        },
        {
          time: "2025-06-28 15:32",
          title: "总回风_主通风机2:风量过高（低）",
          status: "已处理",
        },
        {
          time: "2025-06-29 09:28",
          title: "主井运输_皮带:速度过高",
          status: "待确认",
        },
        {
          time: "2025-06-28 19:07",
          title: "总回风_主通风机1:二级电机定子1温度报警",
          status: "待确认",
        },
        {
          time: "2025-06-28 18:26",
          title: "总回风_主通风机1:二级电机定子2温度报警",
          status: "已处理",
        },
        {
          time: "2025-06-28 17:39",
          title: "总回风_主通风机1:一级电机定子1温度报警",
          status: "待确认",
        },
        {
          time: "2025-06-28 17:34",
          title: "总回风_主通风机1:一级电机定子2温度报警",
          status: "已处理",
        },
        {
          time: "2025-06-28 15:58",
          title: "总回风_主通风机2:一级电机定子2温度报警",
          status: "待确认",
        },
        {
          time: "2025-06-28 15:32",
          title: "总回风_主通风机1:负压过高（低）",
          status: "待确认",
        },
        {
          time: "2025-06-28 15:32",
          title: "总回风_主通风机2:风量过高（低）",
          status: "已处理",
        },
      ],
      alarmData1: [
        {
          time: "2025-06-29 09:28",
          title: "主井运输_皮带:速度过高",
          status: "待确认",
        },
        {
          time: "2025-06-28 19:07",
          title: "总回风_主通风机1:二级电机定子1温度报警",
          status: "待确认",
        },
        {
          time: "2025-06-28 18:26",
          title: "总回风_主通风机1:二级电机定子2温度报警",
          status: "已处理",
        },
        {
          time: "2025-06-28 17:39",
          title: "总回风_主通风机1:一级电机定子1温度报警",
          status: "待确认",
        },
        {
          time: "2025-06-28 17:34",
          title: "总回风_主通风机1:一级电机定子2温度报警",
          status: "已处理",
        },
        {
          time: "2025-06-28 15:58",
          title: "总回风_主通风机2:一级电机定子2温度报警",
          status: "待确认",
        },
        {
          time: "2025-06-28 15:32",
          title: "总回风_主通风机1:负压过高（低）",
          status: "待确认",
        },
        {
          time: "2025-06-28 15:32",
          title: "总回风_主通风机2:风量过高（低）",
          status: "已处理",
        },
        {
          time: "2025-06-29 09:28",
          title: "主井运输_皮带:速度过高",
          status: "待确认",
        },
        {
          time: "2025-06-28 19:07",
          title: "总回风_主通风机1:二级电机定子1温度报警",
          status: "待确认",
        },
        {
          time: "2025-06-28 18:26",
          title: "总回风_主通风机1:二级电机定子2温度报警",
          status: "已处理",
        },
        {
          time: "2025-06-28 17:39",
          title: "总回风_主通风机1:一级电机定子1温度报警",
          status: "待确认",
        },
        {
          time: "2025-06-28 17:34",
          title: "总回风_主通风机1:一级电机定子2温度报警",
          status: "已处理",
        },
        {
          time: "2025-06-28 15:58",
          title: "总回风_主通风机2:一级电机定子2温度报警",
          status: "待确认",
        },
        {
          time: "2025-06-28 15:32",
          title: "总回风_主通风机1:负压过高（低）",
          status: "待确认",
        },
        {
          time: "2025-06-28 15:32",
          title: "总回风_主通风机2:风量过高（低）",
          status: "已处理",
        },
      ],
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
  methods: {
    dp() {
      this.$router.push({ path: "/datav" }).catch(() => {});
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);

      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: "故障分布",
            type: "pie",
            radius: ["0%", "80%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.chartData.map((item) => ({
              value: item.value,
              name: item.name,
              itemStyle: {
                color: this.getColorByClassName(item.className),
              },
            })),
          },
        ],
      };

      this.chart.setOption(option);

      // 窗口大小变化时重新调整图表大小
      window.addEventListener("resize", this.handleResize);
    },
    getColorByClassName(className) {
      const colors = {
        blue: "#5470C6",
        purple: "#9A60B4",
        orange: "#EE6666",
        others: "#91CC75",
      };
      return colors[className] || "#999";
    },
    highlightChart(index) {
      if (this.chart) {
        this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: index,
        });
      }
    },
    unhighlightChart(index) {
      if (this.chart) {
        this.chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: index,
        });
      }
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
  },
  watch: {},
  created() {
    // Convert your HTML data to the format needed by the component
    this.alarmItems = Array.from(
      document.querySelectorAll("#scrollList li")
    ).map((li) => ({
      children: Array.from(li.querySelectorAll("div")),
    }));
  },
};
</script>

<style scoped lang="scss">
$link-color: #4a90e2;
$link-highlight: #00f7ff;
$animation-duration: 2s;

#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  .screen-wrap {
    width: 100%;
    height: 100%;
    min-height: 1080px;
    background: url(./img/body-bg.png) 0 0 no-repeat;
    background-size: 100% 1080px;
    overflow: hidden;
    .top-nav {
      box-sizing: border-box;
      height: 100px;
      background-image: url(./img/top-bj.png);
      background-repeat: no-repeat;
      background-size: cover;
      padding: 0 24px 0 34px;
      display: flex;
      justify-content: space-between;
      .nav-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 36px;
        color: #fff;
        line-height: 80px;
        width: 32%;
      }
      .tabs {
        height: 70px;
        display: flex;
        align-items: center;
      }
      .nav-time {
        height: 70px;
        line-height: 70px;
        color: #fff;
      }
    }
    .flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left-content {
        width: 450px;
        height: 1004px;
        background: url(./img/left-bg.png) 0 0 no-repeat;
        background-size: 100%;
        .left-wrap {
          padding: 22px 30px;
          h3 {
            margin: 0;
            padding-left: 9px;
            border-left: 4px solid #a5d5ff;
            color: #92daf9;
            font-size: 18px;
            line-height: 1;
            background: linear-gradient(180deg, #fff, #6cf);
            background-clip: text;
          }
          i {
            color: #9fcdf6;
            font-size: 20px;
            opacity: 0.4;
          }
          .el-icon-arrow-right {
            font-family: element-icons !important;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            vertical-align: baseline;
            display: inline-block;
          }
          .value-list {
            padding: 0;
            margin-top: 35px;
          }
          ul {
            padding: 0;
            margin: 0;
          }
          li {
            list-style: none;
          }
          .title {
            color: #7da3c3;
            font-size: 16px;
            list-style: none;
          }
          .value {
            margin-top: 3px;
            font-size: 32px;
            font-weight: 700;
            color: #e7ef8f;
            background: linear-gradient(0deg, #faff67, #fff);
            background-clip: text;
          }
          .tab-list {
            display: flex;
            justify-content: space-between;
            align-items: center;
            li {
              margin-right: 16px;
              font-size: 16px;
              color: #7da3c3;
            }
            .active {
              color: #c4e3ff;
            }
          }
          .chart-list {
            li {
              display: flex;
              align-items: center;
              color: #7da3c3;
              font-size: 16px;
              line-height: 1;
            }
            span {
              padding-left: 5px;
              color: #fff;
              font-size: 18px;
            }
          }
          .chart-list {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 150px;
          }

          .chart-list li {
            padding: 8px 12px;
            margin-bottom: 8px;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            transition: all 0.3s;
          }

          .chart-list li:hover {
            transform: translateX(5px);
          }

          .chart-list li.blue {
            background-color: rgba(84, 112, 198, 0.1);
            color: #5470c6;
          }

          .chart-list li.purple {
            background-color: rgba(154, 96, 180, 0.1);
            color: #9a60b4;
          }

          .chart-list li.orange {
            background-color: rgba(238, 102, 102, 0.1);
            color: #ee6666;
          }

          .chart-list li.others {
            background-color: rgba(145, 204, 117, 0.1);
            color: #91cc75;
          }
        }
      }
      .center-wrap {
        width: 978px;
        height: 1004px;
        .link-status {
          position: relative;
          .cloud-icon {
            z-index: 9;
            position: absolute;
            top: 20px;
            left: 340px;
            width: 299px;
            height: 224px;
            background: url(./img/cloud-icon.png) 0 0 no-repeat;
            background-size: 100%;
            li {
              width: 98px;
              height: 100px;
              padding-top: 95px;
              color: #c4e3ff;
              font-size: 16px;
              text-align: center;
              list-style: none;
            }
          }
          .status {
            width: 100%;
            height: 550px;
            li {
              width: 98px;
              height: 100px;
              padding-top: 95px;
              color: #c4e3ff;
              font-size: 16px;
              text-align: center;
              list-style: none;
            }
          }
          .video-system {
            position: absolute;
            top: 50px;
            left: 100px;
            background: url(./img/video-icon.png) top no-repeat;
            background-size: 100%;
            li {
              width: 98px;
              height: 100px;
              padding-top: 95px;
              color: #c4e3ff;
              font-size: 16px;
              text-align: center;
              list-style: none;
            }
          }
          .transport-system {
            position: absolute;
            top: 280px;
            left: 150px;
            background: url(./img/transport-icon.png) top no-repeat;
            background-size: 100%;
            li {
              width: 98px;
              height: 100px;
              padding-top: 95px;
              color: #c4e3ff;
              font-size: 16px;
              text-align: center;
              list-style: none;
            }
          }
          .ventilate-wind-system {
            position: absolute;
            top: 378px;
            left: 315px;
            background: url(./img/ventilate-wind-icon.png) top no-repeat;
            background-size: 100%;
            li {
              width: 98px;
              height: 100px;
              padding-top: 95px;
              color: #c4e3ff;
              font-size: 16px;
              text-align: center;
              list-style: none;
            }
          }
          .compresse-wind-system {
            position: absolute;
            top: 378px;
            left: 630px;
            background: url(./img/compresse-wind-icon.png) top no-repeat;
            background-size: 100%;
            li {
              width: 98px;
              height: 100px;
              padding-top: 95px;
              color: #c4e3ff;
              font-size: 16px;
              text-align: center;
              list-style: none;
            }
          }
          .water-system {
            position: absolute;
            top: 200px;
            left: 720px;
            background: url(./img/water-icon.png) top no-repeat;
            background-size: 100%;
            li {
              width: 98px;
              height: 100px;
              padding-top: 95px;
              color: #c4e3ff;
              font-size: 16px;
              text-align: center;
              list-style: none;
            }
          }
          .elec-system {
            position: absolute;
            top: -10px;
            left: 750px;
            background: url(./img/elec-icon.png) top no-repeat;
            background-size: 100%;
            li {
              width: 98px;
              height: 100px;
              padding-top: 95px;
              color: #c4e3ff;
              font-size: 16px;
              text-align: center;
              list-style: none;
            }
          }
          .legend {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100px;
            height: 70px;
            padding: 11px;
            background: rgba(91, 200, 255, 0.1);
            border: 1px solid rgba(6, 75, 126, 0.1);
            li {
              display: flex;
              align-items: center;
              line-height: 1;
              color: #7da3c3;
              font-size: 12px;
            }
            li:not(:first-child) {
              margin-top: 12px;
            }
            .all-link:before {
              background-color: #03f6ff;
            }
            .discon-link:before {
              background-color: #fd3d01;
            }
            li:before {
              content: "";
              display: block;
              width: 23px;
              height: 3px;
              margin-right: 5px;
            }
            .el-icon-question {
              color: #90f5f8;
              position: absolute;
              top: 3px;
              right: 3px;
            }
            .el-icon-question {
              font-family: element-icons !important;
              font-style: normal;
              font-weight: 400;
              font-variant: normal;
              text-transform: none;
              line-height: 1;
              vertical-align: baseline;
              display: inline-block;
            }
            li {
              display: flex;
              align-items: center;
              line-height: 1;
              color: #7da3c3;
              font-size: 12px;
            }
          }
        }
        .status {
          width: 100%;
          height: 550px;
        }
        .system-list {
          margin-top: 14px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          position: relative;
          left: -2%;
          .flex1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          h4 {
            height: 30px;
            margin: 0;
            line-height: 30px;
            text-align: center;
            color: #fff;
            font-size: 16px;
            font-weight: 400;
            background-color: rgba(11, 79, 192, 0.4);
          }
          .items {
            padding: 12px 15px;
            text-align: center;
            .value {
              font-size: 18px;
            }
            .blue {
              color: #48ece7;
            }
            .red {
              color: #fd3d01;
            }
            .title {
              color: #7da3c3;
              font-size: 14px;
            }
          }
          li {
            margin: auto;
            width: 154px;
            height: 96px;
            background-color: rgba(34, 137, 225, 0.1);
            list-style: none;
          }
          ul {
            padding: 0;
            margin: 0;
          }
        }
        .list-items {
          width: 100%;
          height: 324px;
          padding: 10px;
          background: url(./img/center-bg.png) 0 0 no-repeat;
          background-size: 100%;
          .header-title {
            h3 {
              margin: 0;
              padding-left: 9px;
              border-left: 4px solid #a5d5ff;
              color: #fff;
              font-size: 18px;
              line-height: 1;
              background: linear-gradient(180deg, #fff, #6cf);
              background-clip: text;
            }
          }
        }
      }
      .right-content {
        width: 450px;
        height: 1004px;
        .right-top {
          width: 450px;
          height: 659px;
          padding: 22px 30px 22px 13px;
          background: url(./img/right-top-bg.png) 0 0 no-repeat;
          background-size: 100%;
          .flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            h3 {
              margin: 0;
              padding-left: 9px;
              color: #a5d5ff;
              font-size: 18px;
              line-height: 1;
            }
            i {
              color: #9fcdf6;
              font-size: 20px;
              opacity: 0.4;
              cursor: pointer;
            }
            .el-icon-arrow-right {
              font-family: element-icons !important;
              font-style: normal;
              font-weight: 400;
              font-variant: normal;
              text-transform: none;
              line-height: 1;
              vertical-align: baseline;
              display: inline-block;
            }
            .value-list {
              padding: 0;
              margin-top: 20px;
              align-items: left;
            }
            li {
              list-style: none;
              display: list-item;
              position: relative;
              left: -10%;
              unicode-bidi: isolate;
            }
            .title {
              color: #7da3c3;
              font-size: 16px;
            }
            .value {
              margin-top: 3px;
              font-size: 32px;
              font-weight: 700;
              color: #faff67;
              background: linear-gradient(0deg, #faff67, #fff);
              background-clip: text;
            }
          }
          .videoInfo {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
            li {
              font-size: 16px;
              line-height: 1;
              list-style: none;
            }
            span {
              padding-left: 5px;
              font-size: 18px;
            }
            .blue {
              padding-right: 20px;
              color: #05d9ff;
            }
            .red {
              padding-right: 20px;
              color: #e71616;
            }
          }
          .playVideo {
            width: 320px;
            height: 180px;
            margin: 10px auto 0;
            border: 1px solid #a5d5ff;
          }
          .report-list {
            margin: 22px 0 0 20px;
            li {
              height: 63px;
              padding-left: 80px;
              list-style: none;
            }
            li:first-child {
              background: url(./img/coal-report-icon-1.png) 0 no-repeat;
              background-size: 65px 63px;
            }
            li:nth-child(2) {
              background: url(./img/coal-report-icon-2.png) 0 no-repeat;
              background-size: 65px 63px;
            }
            .value {
              margin: 3px 0 6px;
              color: #fff;
              font-size: 16px;
            }
            .title {
              color: #c4e3ff;
              font-size: 15px;
            }
          }
          .right-bottom {
            width: 450px;
            height: 325px;
            padding: 12px 30px 12px 13px;
            background: url(./img/right-bottom-bg.png) 0 0 no-repeat;
            background-size: 100%;
            .flex {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          }
        }
      }
      h3 {
        margin: 0;
        padding-left: 9px;
        border-left: 4px solid #a5d5ff;
        color: #a5d5ff;
        font-size: 18px;
        line-height: 1;
      }
      i {
        color: #9fcdf6;
        font-size: 20px;
        opacity: 0.4;
        cursor: pointer;
      }
      .el-icon-arrow-right {
        font-family: element-icons !important;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: baseline;
        display: inline-block;
      }
    }
  }
}
</style>

